import React from 'react';
import {Image, ScrollView, View} from 'react-native';
import {List} from 'antd-mobile';


const Item = List.Item;
const Brief = Item.Brief;

export default class ListDemo extends React.Component<any, any> {

  clickItem(type) {
    switch (type) {
      case 'accrodion':
        console.log(this.props);
        this.props.navigation.navigate('accrodion');
        break;
      case 'actionSheet':
        this.props.navigation.navigate('actionSheet');
        break;
      case 'ActivityIndicator':
        this.props.navigation.navigate('ActivityIndicator');
        break;
      case 'Badge':
        this.props.navigation.navigate('Badge');
        break;
      case 'card':
        this.props.navigation.navigate('card');
        break;
      case 'button':
        this.props.navigation.navigate('button');
        break;
      case 'carousel':
        this.props.navigation.navigate('carousel');
        break;
      case 'checkBox':
        this.props.navigation.navigate('checkBox');
        break;
      case 'drawer':
        this.props.navigation.navigate('drawer');
        break;
      case 'flex':
        this.props.navigation.navigate('flex');
        break;
      case 'grid':
        this.props.navigation.navigate('grid');
        break;
      case 'icon':
        this.props.navigation.navigate('icon');
        break;
      case 'imagePicker':
        this.props.navigation.navigate('imagePicker');
        break;
      case 'inputItem':
        this.props.navigation.navigate('inputItem');
        break;
      case 'menu':
        this.props.navigation.navigate('menu');
        break;
      case 'model':
        this.props.navigation.navigate('model');
        break;
      case 'datePickerView':
        this.props.navigation.navigate('datePickerView');
        break;
      case 'noticeBar':
        this.props.navigation.navigate('noticeBar');
        break;
      case 'pagination':
        this.props.navigation.navigate('pagination');
        break;
      case 'pickerView':
        this.props.navigation.navigate('pickerView');
        break;
      case 'picker':
        this.props.navigation.navigate('picker');
        break;
      case 'popover':
        this.props.navigation.navigate('popover');
        break;
      case 'progress':
        this.props.navigation.navigate('progress');
        break;

    }
  }

  render() {
    return (
      <ScrollView
        style={{flex: 1, backgroundColor: '#f5f5f9'}}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <List renderHeader={() => 'basic'}>
          <Item onClick={this.clickItem.bind(this, 'accrodion')}>accordion(手风琴) </Item>
          <Item onClick={this.clickItem.bind(this, 'actionSheet')}>ActionSheet(动作面板)</Item>
          <Item onClick={this.clickItem.bind(this, 'ActivityIndicator')}>ActivityIndicator(活动指示器)</Item>
          <Item onClick={this.clickItem.bind(this, 'Badge')}>Badge(微标数)</Item>
          <Item onClick={this.clickItem.bind(this, 'card')}>Card(卡片)</Item>
          <Item onClick={this.clickItem.bind(this, 'button')}>button(按钮)</Item>
          <Item onClick={this.clickItem.bind(this, 'carousel')}>Carousel(走马灯)</Item>
          <Item onClick={this.clickItem.bind(this, 'checkBox')}>CheckBox(复选框)</Item>
          <Item onClick={this.clickItem.bind(this, 'drawer')}>Drawer(抽屉)</Item>
          <Item onClick={this.clickItem.bind(this, 'flex')}>Flex(flex布局)</Item>
          <Item onClick={this.clickItem.bind(this, 'grid')}>Grid(grid)</Item>
          <Item onClick={this.clickItem.bind(this, 'datePickerView')}>DatePickerViewDemo(时间选择器)</Item>
          <Item onClick={this.clickItem.bind(this, 'icon')}>icon(Icon)</Item>
          <Item onClick={this.clickItem.bind(this, 'imagePicker')}>imagePicker(图片选择器)</Item>
          <Item onClick={this.clickItem.bind(this, 'inputItem')}>inputItem(输入框)</Item>
          <Item onClick={this.clickItem.bind(this, 'menu')}>menu(菜单)</Item>
          <Item onClick={this.clickItem.bind(this, 'model')}>model(模态框)</Item>
          <Item onClick={this.clickItem.bind(this, 'noticeBar')}>noticeBar(通告栏)</Item>
          <Item onClick={this.clickItem.bind(this, 'pagination')}>pagination(分页器)</Item>
          <Item onClick={this.clickItem.bind(this, 'pickerView')}>pickerView(选择器)</Item>
          <Item onClick={this.clickItem.bind(this, 'picker')}>picker(选择器)</Item>
          <Item onClick={this.clickItem.bind(this, 'popover')}>popover(弹出框)</Item>

        </List>
      </ScrollView>
    );
  }
}
